import React, { Component } from "react";
import { connect } from "react-redux";
import styles from "./user.module.scss";
import userImg from "../../assets/images/user.jpg";
import userImg2 from "../../assets/images/user2.png";
import {withRouter} from "react-router-dom"

class UserPage extends Component {
  render() {
    return (
      <div>
        {/* 头部用户登录 userLogin*/}
        <div className={styles.userLogin}>
          {this.props.isLogin ? (
            <div className={styles.login}>
              {/* 已经登录时 */}
              <div className={styles.yesLeft}>
                <div className={styles.userImg}>
                  <img src={userImg} alt="" />
                </div>
                <div className={styles.userName}>
                  <h3>阿华</h3>
                  <p>填满了肚子，人就不会空虚</p>
                </div>
              </div>
              <div className={styles.yesRight}>
                <svg className={styles.icon} aria-hidden="true">
                  <use href="#icon-shezhi"></use>
                </svg>
                <svg className={styles.icon} aria-hidden="true">
                  <use href="#icon-xiaoxi"></use>
                </svg>
              </div>
            </div>
          ) : (
            <div className={styles.login}>
              {/* 没有登录时 */}
              <div className={styles.yesLeft}>
                <div className={styles.userImg}>
                  <img src={userImg2} alt="" />
                </div>
                <div className={styles.userName}>
                  <h3
                    onClick={() => {
                      this.props.history.push('/login')
                    }
                    }
                    style={{ color: "#409EFF" }}
                  >
                    登录/注册
                  </h3>
                  <p>再忙也要好好吃饭</p>
                </div>
              </div>
              <div className={styles.yesRight}>
                <svg className={styles.icon} aria-hidden="true">
                  <use href="#icon-shezhi"></use>
                </svg>
                <svg className={styles.icon} aria-hidden="true">
                  <use href="#icon-xiaoxi"></use>
                </svg>
              </div>
            </div>
          )}
        </div>

        {/* 常用功能 ofenFunction */}
        <div className={styles.ofenFuntion}>
          <h3>常用功能</h3>
          <div className={styles.funItem}>
            <div className={styles.item}>
              <svg className={styles.icon} aria-hidden="true">
                <use href="#icon-hongbao"></use>
              </svg>

              <span>红包卡券</span>
            </div>
            <div className={styles.item}>
              <svg className={styles.icon} aria-hidden="true">
                <use href="#icon-aixin"></use>
              </svg>
              <span>店铺关注</span>
            </div>
            <div className={styles.item}
            onClick={() => {
              this.props.history.push('/cart')
            }
            }>
              <svg className={styles.icon} aria-hidden="true">
                <use href="#icon-gouwucheman"></use>
              </svg>
              <span>购物车</span>
            </div>
          </div>
        </div>

        {/* 赚吃货豆 bean */}
        <div className={styles.bean}>
          <div className={styles.beanLeft}>
            <svg className={styles.icon} aria-hidden="true">
              <use href="#icon-qiandai"></use>
            </svg>
            <span>赚吃货豆</span>
          </div>
          <div className={styles.beanRight}>可兑换大红包{">"}</div>
        </div>

        {/* 我的钱包 wallet */}
        <div className={styles.wallet}>
          <div className={styles.walletTop}>
            <h3>我的钱包</h3>
            <span>金币、余额{">"}</span>
          </div>
          <div className={styles.walletbottom}>
            {this.props.wolletList.map((v) => {
              return (
                <div className={styles.walletItem} key={v.tit}>
                  <p>{v.tit}</p>
                  <h4>
                    {v.num}
                    <span>{v.unit}</span>
                  </h4>
                  <p className={styles.alt}>{v.alt}</p>
                </div>
              );
            })}
          </div>
        </div>

        {/* 更多推荐 recommend */}
        <div className={styles.recommend}>
          <div className={styles.tit}>
            <h3>更多推荐</h3>
          </div>
          <div className={styles.item}>
            {this.props.recommend.map((item) => {
              return (
                <div className={styles.moreItem} key={item.id}
                onClick={() => {
                  if(item.id===2){
                    this.props.history.push('/address')
                  }
                }
                }>
                  <svg className={styles.icon} aria-hidden="true">
                    <use href={item.icon}></use>
                  </svg>
                  <span>{item.name}</span>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    isLogin: state.userReducer.isLogin,
    wolletList: state.userReducer.wolletList,
    recommend: state.userReducer.recommend,
  };
};
// const mapDispatchToProps = (dispatch) => {
//   return {
//     goToLogin: function () {
//       let param1 = {};
//       dispatch(push("/path/login", param1));
//     },
//   };
// };
export default withRouter(connect(mapStateToProps, null)(UserPage));

